<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript">
        $(function () {
            /**
             * ajax获取角色下拉框
             */
            var options={
                url: '/system/userRole/getRoleList',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    debugger;
                    var str="<select name=\"roleId\" id=\"roleId\" class=\"form-control\" width='100'>";
                    $.each(data.data,function (index,item) {
                            str += ("<option value=" + item.id + ">" + item.name + "</option>");

                    });
                    $("#abcd").append(str).append("</select>");
                }
            };
            $.ajax(options);
        });
        /**
         * 添加
         */
        $('#btn_save').click(function () {
            //1. 表单验证
            var rs  =  $('#form').bootstrapValidator('validate');
            if (rs) {
                //2 如果验证成功发送ajax请求保存角色
                var data = $("#form").serialize();
                var options = {
                    url: '/system/userRole/addUserRole',
                    type: 'post',
                    dataType: 'json',
                    data: $('#form').serialize(),
                    success: function (data) {
                        if (data) {
                            showAlert('添加成功!',function () {
                                $('#table').bootstrapTable('refresh', {silent: true})
                                $('#modal').modal('hide')

                            });
                        }
                    }
                };
                $.ajax(options);
            }
        });
    </script>
</head>
<body class="fixed-left">
<form id="form" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title" id="exampleModalLabel">添加角色</h5>
    </div>
    <div class="modal-body">
        <div class="container">
            <div class="form-group row">
                <label for="username" class="col-sm-2 form-control-label">用户名：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" name="username" placeholder="输入用户名" required data-bv-notempty-message="登录名是必填的并且不能为空" >
                </div>
            </div>
            <div class="form-group row">
                <label for="password" class="col-sm-2 form-control-label">密码：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="password" name="password" placeholder="输入密码" required data-bv-notempty-message="登录名是必填的并且不能为空" >
                </div>
            </div>
            <div class="form-group row">
                <label for="confirmThePassword" class="col-sm-2 form-control-label">确认密码：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="confirmThePassword" name="confirmThePassword" placeholder="确认密码" required data-bv-notempty-message="登录名是必填的并且不能为空" >
                </div>
            </div>
            <div class="form-group row">
                <label for="email" class="col-sm-2 form-control-label">E-mail：</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="email" name="email" placeholder="无"></textarea>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 mb15">
                <div class="form-group">
                    <label class="control-label col-xs-3">所属角色：</label>
                    <div class="col-xs-10" id="abcd">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="btn_save" type="button" class="btn btn-primary">保存</button>
        <button type="reset" class="btn btn-secondary" >重置</button>
    </div>
</form>
</body>
</html>